<template>
    <div>
        <el-input v-model="localWidgetName" maxlength="20" show-word-limit placeholder="请输入标识字段1"></el-input>
    </div>
</template>

<script lang="ts">
// @ts-nocheck

import { Component, Prop, Vue } from 'vue-property-decorator'
import widgets from '@/components/decorate/widgets'
import pcWidgets from '@/components/decorate/pc-widgets'
@Component({
    components: {
    }
})

export default class AttributeUserServe extends Vue {
    @Prop({ default: 'mobile' }) client!: string

    localWidgetName: string = ''
    widgets = this.client == 'mobile' ? widgets : pcWidgets

    /** S data **/

    /** E data **/

    /** S computed **/


    get widgetName() {
        return this.$store.getters.widgetName
    }

    /** E computed **/



    mounted() {
        this.localWidgetName = this.widgetName
    }



    /** S methods **/
    async updateWidgeteName() {
        if (!this.localWidgetName) {
            return
        }
        if (this.localWidgetName === this.widgetName) {
            this.$message('组件名称没有变化')
            return
        }
        try {
            await this.$confirm('是否确认更改需要显示的组件?', '警告', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            })
            // @ts-expect-error
            const hasComponent = !!this.widgets[this.localWidgetName]
            if (hasComponent) {
                this.setPageDataName()
                return
            }
            await this.$confirm('代码中没有对应组件，是否继续?此操作完成后，请立即在代码中添加对应组件', '警告', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            })
            this.setPageDataName()

        } catch (error) {
            this.$message({
                type: 'info',
                message: '已取消删除'
            })
        }

    }
    setPageDataName() {
        this.$store.commit('setPageDataName', this.localWidgetName)
    }

    /** E methods **/


}
</script>

<style lang="scss" scoped></style>
